<template>
  <div class="com-common-page" :style="{ height: pageHeight }">
    <div>
      <img :src="pageType.url" />
    </div>
    <p>
      {{ $t(pageType.text) }} <span>{{ pageType.tel }} </span>
    </p>
    <div slot="footer" class="dialog_footer">
      <!-- <t-button
        class="btn_cancel"
        @click="toPath('last')"
      >返回上一页</t-button> -->

      <el-button class="btn_confirm empty-button" @click="loginOut()">{{ $t('退出登录') }}</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import { Component, Prop, Watch } from 'vue-property-decorator';
import * as Cookies from 'js-cookie';

import { sessionStorageRemove } from '@/utils/tools';
import { viewerInfo } from '@/utils/viewer';
@Component({
  components: {},
})
/** svg处理 */
export default class ComponentCommonPage extends Vue {
  typePermission: any = {
    url: require('@/assets/images/common/no_permission.png'),
    text: this.$t('对不起，您无权访问该系统。如有疑问请联系：'),
    tel: '8001',
  };

  type404: any = {
    url: require('@/assets/images/common/404.png'),
    text: this.$t('对不起，该页面已丢失。如有疑问请联系：'),
    tel: '8001',
  };

  typeMessage: any = {
    url: require('@/assets/images/common/message.png'),
    text: this.$t('对不起，没有查到相应信息。如有疑问请联系：'),
    tel: '8001',
  };

  typeNetwork: any = {
    url: require('@/assets/images/common/net.png'),
    text: this.$t('对不起，网络异常。如有疑问请联系：'),
    tel: '8001',
  };

  typeContent: any = {
    url: require('@/assets/images/common/no_content.png'),
    text: this.$t('对不起，没有找到相应内容。如有疑问请联系：'),
    tel: '8001',
  };

  typeNull: any = {
    url: require('@/assets/images/common/null.png'),
    text: this.$t('对不起，数据为空。如有疑问请联系：'),
    tel: '8001',
  };

  typeSearch: any = {
    url: require('@/assets/images/common/search.png'),
    text: this.$t('对不起，未查询到相应数据。如有疑问请联系：'),
    tel: '8001',
  };

  typeSetting: any = {
    url: require('@/assets/images/common/setting.png'),
    text: this.$t('对不起，未找到相应设置。如有疑问请联系：'),
    tel: '8001',
  };

  /** 跳转页面 */
  public async toPath(val: string) {
    if (val === 'last') {
      this.$router.go(-1);
    } else {
      this.$router.push({ path: '/' });
    }
  }

  pageType: any = {};

  pageHeight: any = 500;
  /** 钩子 函数 */
  private mounted() {
    const pageInfo: any = viewerInfo();

    this.pageHeight = `${pageInfo.height}px`;

    this.setPage(this.type);
  }
  // eslint-disable-next-line require-jsdoc
  public loginOut() {
    // 清空登录态
    Cookies.set('token', '');
    Cookies.set('User', '');
    sessionStorageRemove('UserMenus');
    sessionStorage.removeItem('reconciliationRoleList');
    this.$store.commit('getUserInfo', {});

    Cookies.set('logoutHistory', window.location.href);
    window.location.href = `${window.location.origin}/logout`;
  }
  /**
   * type 可取值范围:
   * permission
   * 404
   * message
   * network
   * content
   * null
   * search
   * setting
   */
  @Prop({ default: '404' }) type!: string;

  /** 监听 类型变化 */
  @Watch('type')
  public onTypeChange(newVal: string, oldVal: string) {
    this.setPage(newVal);
  }

  /** 设置页面信息 */
  public setPage(type: string) {
    switch (type) {
      case 'permission':
        this.pageType = this.typePermission;
        break;
      case '404':
        this.pageType = this.type404;
        break;
      case 'message':
        this.pageType = this.typeMessage;
        break;
      case 'network':
        this.pageType = this.typeNetwork;
        break;
      case 'content':
        this.pageType = this.typeContent;
        break;
      case 'null':
        this.pageType = this.typeNull;
        break;
      case 'search':
        this.pageType = this.typeSearch;
        break;
      case 'setting':
        this.pageType = this.typeSetting;
        break;
      default:
        this.pageType = this.type404;
        break;
    }
  }
}
</script>

<style lang="less" scoped>
@import './index.less';
</style>
